<template>
    <!-- 文本的内容与样式 -->
    <div class="style-text-box">
        <YXPadding :padding="appearance.padding"/>
        <YXBorder :options="options"
                  :border="appearance.border"/>
    </div>
</template>

<script>
    import YXPadding from '../common/contentstyle/Padding.vue';
    import YXBorder from '../common/contentstyle/Border.vue';

    export default {
        name: 'TextStyle',
        props: {
            appearance: {
                type: Object,
                default: _ => {
                    return {
                        padding: {
                            top: 10,
                            right: 10,
                            bottom: 10,
                            left: 10
                        },
                        border: {
                            style: 'none',
                            width: 1,
                            radius: '0',
                            color: 'rgba(0, 0, 0, 1)'
                        }
                    };
                }
            }
        },
        components: {
            YXPadding,
            YXBorder
        },
        data() {
            return {
                options: [
                    {
                        value: 'none',
                        label: '无'
                    },
                    {
                        value: 'solid',
                        label: '实线'
                    },
                    {
                        value: 'dashed',
                        label: '虚线'
                    },
                    {
                        value: 'dotted',
                        label: '点线'
                    },
                    {
                        value: 'double',
                        label: '双实线'
                    }
                ]
            };
        }
    }
</script>

<style scoped lang="scss">
    .style-text-box {
        .text-border-box {
            margin-top: 20px;
            padding-top: 12px;
            border-top: 1px solid rgba(0, 0, 0, .15);

            .outer-box {
                .h0 {
                    height: 0 !important;
                }
                .group-attribute-name {
                    height: 20px;
                    width: fit-content;
                    user-select: none;
                    color: #999;
                    cursor: pointer;

                    .group-icon {
                        font-size: 18px;
                    }
                }
                .group-attribute {
                    height: 28px;
                    display: flex;
                    overflow: hidden;
                    margin-top: 10px;
                    transition: height .2s;

                    .attr-item-label {
                        padding-right: 12px;
                        line-height: 28px;
                    }
                    .block {
                        flex: 1;
                    }
                }
            }
        }
    }
</style>
